<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试微信公众号JSSDK</title>
  <!--引入微信JS文件-->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
  <script src="http://libs.baidu.com/jquery/2.1.3/jquery.min.js"></script>
  <script>
    //获取当前页面地址
    var url = (window.location.href).split('#')[0];

    //调取后台接口获取权限验证配置
    $.ajax({
      type: "get",
      url: "http://fyizy4.natappfree.cc/enba-jssdk/jsapi-signature?url=" + url,//替换网址
      success: function (data) {
        var result;
        if (data.success) {
          result = data.result;
        }
        //通过config接口注入权限验证配置
        wx.config({
          debug: false,
          appId: result.appId,// 必填，公众号的唯一标识
          timestamp: result.timestamp,// 必填，生成签名的时间戳
          nonceStr: result.nonceStr,// 必填，生成签名的随机串
          signature: result.signature,// 必填，签名
          jsApiList: [// 必填，需要使用的JS接口列表
            "chooseImage",//拍照或从手机相册中选图接口
            "onMenuShareAppMessage",//分享给好友
            "updateAppMessageShareData",//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
            "updateTimelineShareData",//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
            "scanQRCode",//调起微信扫一扫接口
            "openLocation",//使用微信内置地图查看位置接口
            "getLocation"//获取地理位置接口
          ]
        });
      },
      error: function (data) {
        console.log(JSON.stringify(data));
      }
    });

    //通过ready接口处理成功验证
    wx.ready(function () {
      wx.checkJsApi({
        jsApiList: ['chooseImage','updateAppMessageShareData','onMenuShareAppMessage','updateTimelineShareData','scanQRCode','getLocation'],// 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function (res) {
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          console.log(JSON.stringify(res));
        }
      });

      var shareData = {
        title: '标题', // 分享标题
        desc: '简介',// 分享描述
        link: url,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://www.opp2.com/wp-content/uploads/2015/06/136-480x300.jpg',// 分享图标
        success: function (res) {
          // 接口调用成功时执行的回调函数。
        },
        cancel: function (res) {
          // 用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
          debugger;
        }
        ,
        trigger: function (res) {
          // 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
          debugger;
        }
        ,
        complete: function (res) {
          // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
          debugger;
        }
        ,
        fail: function (res) {
          // 接口调用失败时执行的回调函数。
          debugger;
        }
      };
      wx.onMenuShareAppMessage(shareData);
    });

    //从相册选取图片
    function wxchooseImage() {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          console.log("wxchooseImage()==>" + JSON.stringify(res));
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

          for (var i = 0; i < localIds.length; i++) {

            document.getElementById("img").src = localIds[i];
            document.getElementById("img").style.display = "block";
            document.getElementById("img").style.width = "100%";
            document.getElementById("img").style.height = "auto";
            document.getElementById("img").style.margin = "0 auto";
            document.getElementById("img").style.border = "1px solid #ccc";
            document.getElementById("img").style.padding = "10px";
            document.getElementById("img").style.marginTop = "10px";
            document.getElementById("img").style.marginBottom = "10px";
            document.getElementById("img").style.display = "block";
            document.getElementById("img").style.marginLeft = "auto";
            document.getElementById("img").style.marginRight = "auto";
            document.getElementById("img").style.marginBottom = "10px";
            document.getElementById("img").style.borderRadius = "5px";
            document.getElementById("img").style.boxShadow = "0 0 5px #ccc";
            document.getElementById("img").style.transition = "all 0.5s";
            document.getElementById("img").style.transform = "scale(1.1)";
            document.getElementById("img").style.opacity = "0.8";
          }
        }
      });
    }



    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    function updateAppMessageShareData() {
        wx.updateAppMessageShareData({
          title: '自定义“分享给朋友”及“分享到QQ”按钮的分享内容', // 分享标题
          desc: '自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容', // 分享描述
          link: 'http://fyizy4.natappfree.cc/enba-jssdk/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'https://www.opp2.com/wp-content/uploads/2015/06/136-480x300.jpg', // 分享图标
          success: function (res) {
          debugger;
          }
        });
    }

    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    function updateTimelineShareData() {

      wx.updateTimelineShareData({
        title: '自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容', // 分享标题
        link: 'http://fyizy4.natappfree.cc/enba-jssdk/index', // 分享链接，该链接域名或路径必须与当前页面对应的
        imgUrl: 'https://www.opp2.com/wp-content/uploads/2015/06/136-480x300.jpg', // 分享图标
        success: function (res) {
        debugger;
        }
      })
    }

    //调起微信扫一扫接口
    function wxscanQRCode() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
          console.log("scanQRCode()==>" + result);
        }
      })
    }

    //使用微信内置地图查看位置接口
    function wxopenLocation() {
      wx.openLocation({
        latitude: 39.908729, // 纬度，浮点数，范围为90 ~ -90
        longitude: 116.397428, // 经度，浮点数，范围为180 ~ -180。
        name: "百度大厦", // 位置名
        address: "北京市海淀区", // 地址详情说明
        scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "http://www.baidu.com" // 在查看位置界面底部显示的超链接
        ,
        success: function (res) {
          console.log("success openLocation()==>" + JSON.stringify(res));
        },
        fail: function (res) {console.log("fail openLocation()==>" + JSON.stringify(res));},
        complete: function (res) {console.log("complete openLocation()==>" + JSON.stringify(res));}
      })
    }

    //获取地理位置接口
    function wxgetLocation() {
      wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度
          console.log("getLocation()==>" + JSON.stringify(res));
        }
      });
    }




  </script>
</head>

<body>
<div>
  <button onclick="wxchooseImage();">点我选取相册</button>
  <!--展示图片-->
  <img id="img" src="" alt=""/>
</div>


<div>
  <button onclick="updateAppMessageShareData();">自定义“分享给朋友”及“分享到QQ”按钮的分享内容</button>
</div>

<div>
  <button onclick="updateTimelineShareData();">自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）</button>
</div>

<div>
  <button onclick="wxscanQRCode();">调起微信扫一扫接口</button>
</div>

<div>
  <button onclick="wxopenLocation();">使用微信内置地图查看位置接口</button>
</div>

<div>
  <button onclick="wxgetLocation();">获取地理位置接口</button>
</div>

</body>
</html>
